import Vue,{PropOptions,VNode} from 'vue';
import {event} from 'quasar';
import {PlainObject} from '../../../../types';
const {stopAndPrevent}=event;
/**
 * 显示位置
 */
export type Position='top'|'bottom'|'center'|'left'|'right'|void;
/**
 * 弹出层
 * @author 唐国雄
 * @date 2021/7/30
 * 属性----------------------
 * v-model						是否显示, boolean
 * :overlay						是否显示遮罩层, boolean
 * :position					显示位置, Position
 * :close-on-click				点击弹出层后关闭, boolean
 * :close-on-click-overlay		点击遮罩层后关闭, boolean
 * :transition-appear			初始渲染动画, boolean
 * :content-class				内容的class, string
 * :content-style				内容的style, PlainObject
 * 事件----------------------
 * @input				显示状态, boolean
 * @show				开始显示
 * @shown				显示动画完毕
 * @hide				开始隐藏
 * @hidden				隐藏动画完毕
 * @click				点击弹出层
 * @click-overlay		点击遮罩层
 * 插槽----------------------
 * #default				弹出层内容
 */
export default Vue.extend({
	name:'Popup',
	props:{
		//是否显示
		value:Boolean,
		//是否显示遮罩层
		overlay:Boolean,
		//显示位置
		position:{
			type:String,
			default:'center',
			validator(v){
				return v==null||[
					'top',
					'bottom',
					'center',
					'left',
					'right',
				].indexOf(v)!==-1;
			}
		} as PropOptions<Position>,
		//点击弹出层后关闭
		closeOnClick:Boolean,
		//点击遮罩层后关闭
		closeOnClickOverlay:Boolean,
		//初始渲染动画
		transitionAppear:Boolean,
		//内容的class
		contentClass:String,
		//内容的style
		contentStyle:{} as PropOptions<PlainObject>,
	},
	computed:{
		classes():string{
			return 'lexmis-Popup'+
				(this.position?` lexmis--${this.position}`:' lexmis--prevent')+
				(this.overlay?' lexmis--overlay':'');
		}
	},
	methods:{
		$_lexmis_beforeEnter(){
			this.$emit('show');
		},
		$_lexmis_afterEnter(){
			this.$emit('shown');
		},
		$_lexmis_beforeLeave(){
			this.$emit('hide');
		},
		$_lexmis_afterLeave(){
			this.$emit('hidden');
		},
		$_lexmis_onClickOverlay(){
			this.$emit('click-overlay');
			if(this.closeOnClickOverlay){
				this.$emit('input',false);
			}
		},
		$_lexmis_onClick(e:Event){
			stopAndPrevent(e);
			this.$emit('click');
			if(this.closeOnClick){
				this.$emit('input',false);
			}
		},
	},
	render(h):VNode{
		const {default:slot}=this.$scopedSlots;
		return h('transition',{
			props:{
				appear:this.transitionAppear
			},
			on:{
				'before-enter':this.$_lexmis_beforeEnter,
				'after-enter':this.$_lexmis_afterEnter,
				'before-leave':this.$_lexmis_beforeLeave,
				'after-leave':this.$_lexmis_afterLeave,
			}
		},[
			this.value
				?h('div',{
					staticClass:this.classes,
					on:{
						click:this.$_lexmis_onClickOverlay
					}
				},[
					h('div',{
						staticClass:'lexmis_content'+(this.contentClass||''),
						staticStyle:this.contentStyle,
						on:{
							click:this.$_lexmis_onClick
						}
					},slot&&slot(undefined))
				])
				:null
		]);
	}
});
